<template>
  <div class="rejected-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">已拒绝人员</h1>
        <p class="page-desc">管理在招聘过程中被拒绝的候选人信息</p>
      </div>
      <div class="header-right">
        <el-button type="warning" @click="handleBatchReconsider" :disabled="selectedCandidates.length === 0">
          <el-icon>
            <RefreshRight />
          </el-icon>
          批量重新考虑
        </el-button>
        <el-button type="danger" @click="handleBatchBlacklist" :disabled="selectedCandidates.length === 0">
          <el-icon>
            <UserFilled />
          </el-icon>
          加入黑名单
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon>
            <DocumentCopy />
          </el-icon>
          导出数据
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon>
              <Close />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.total }}</div>
            <div class="stat-label">总拒绝数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card resume">
          <div class="stat-icon">
            <el-icon>
              <Document />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.resumeRejected }}</div>
            <div class="stat-label">简历筛选拒绝</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card interview">
          <div class="stat-icon">
            <el-icon>
              <VideoCamera />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.interviewRejected }}</div>
            <div class="stat-label">面试拒绝</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card blacklist">
          <div class="stat-icon">
            <el-icon>
              <UserFilled />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.blacklisted }}</div>
            <div class="stat-label">黑名单</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索筛选 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="候选人姓名">
          <el-input v-model="searchForm.candidateName" placeholder="请输入候选人姓名" clearable style="width: 150px" />
        </el-form-item>

        <el-form-item label="投递职位">
          <el-select v-model="searchForm.jobId" placeholder="请选择职位" clearable filterable style="width: 200px">
            <el-option v-for="job in jobList" :key="job.id" :label="job.title" :value="job.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="拒绝阶段">
          <el-select v-model="searchForm.rejectionStage" placeholder="请选择拒绝阶段" clearable style="width: 150px">
            <el-option label="简历筛选" value="resume_screening" />
            <el-option label="初试" value="first_interview" />
            <el-option label="复试" value="second_interview" />
            <el-option label="终面" value="final_interview" />
            <el-option label="背景调查" value="background_check" />
            <el-option label="Offer阶段" value="offer_stage" />
          </el-select>
        </el-form-item>

        <el-form-item label="拒绝原因">
          <el-select v-model="searchForm.rejectionReason" placeholder="请选择拒绝原因" clearable style="width: 150px">
            <el-option label="技能不匹配" value="skill_mismatch" />
            <el-option label="经验不足" value="insufficient_experience" />
            <el-option label="薪资期望过高" value="salary_expectation" />
            <el-option label="沟通能力差" value="poor_communication" />
            <el-option label="文化不匹配" value="culture_mismatch" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>

        <el-form-item label="拒绝时间">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width: 240px" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="已拒绝" value="rejected" />
            <el-option label="黑名单" value="blacklisted" />
            <el-option label="重新考虑" value="reconsidered" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 拒绝人员列表 -->
    <el-card class="table-card">
      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="ID" width="80" />

        <!-- 候选人信息 -->
        <el-table-column label="候选人信息" min-width="200">
          <template #default="{ row }">
            <div class="candidate-info">
              <el-avatar :size="40" :src="row.avatar">
                <el-icon>
                  <User />
                </el-icon>
              </el-avatar>
              <div class="info-content">
                <div class="candidate-name">
                  {{ row.candidateName }}
                  <el-tag v-if="row.isBlacklisted" type="danger" size="small" class="blacklist-tag">
                    黑名单
                  </el-tag>
                </div>
                <div class="candidate-contact">
                  <span>{{ row.phone }}</span>
                  <span class="email">{{ row.email }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 投递职位 -->
        <el-table-column label="投递职位" min-width="150">
          <template #default="{ row }">
            <div class="job-info">
              <div class="job-title">{{ row.jobTitle }}</div>
              <div class="job-department">{{ row.department }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 拒绝阶段 -->
        <el-table-column label="拒绝阶段" width="120">
          <template #default="{ row }">
            <el-tag :type="getStageTagType(row.rejectionStage)">
              {{ getStageText(row.rejectionStage) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 拒绝原因 -->
        <el-table-column label="拒绝原因" min-width="150">
          <template #default="{ row }">
            <div class="rejection-reason">
              <div class="reason-main">{{ getReasonText(row.rejectionReason) }}</div>
              <div class="reason-detail" v-if="row.rejectionDetail">
                {{ row.rejectionDetail }}
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 拒绝人 -->
        <el-table-column label="拒绝人" width="100">
          <template #default="{ row }">
            {{ row.rejectedBy }}
          </template>
        </el-table-column>

        <!-- 拒绝时间 -->
        <el-table-column label="拒绝时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.rejectedAt) }}
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleViewDetail(row)">
              <el-icon>
                <View />
              </el-icon>
              查看
            </el-button>
            <el-button v-if="!row.isBlacklisted" type="warning" link @click="handleReconsider(row)">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重新考虑
            </el-button>
            <el-dropdown @command="(command) => handleAction(command, row)">
              <el-button type="primary" link>
                更多
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="blacklist" v-if="!row.isBlacklisted">
                    <el-icon>
                      <UserFilled />
                    </el-icon>
                    加入黑名单
                  </el-dropdown-item>
                  <el-dropdown-item command="removeBlacklist" v-else>
                    <el-icon>
                      <User />
                    </el-icon>
                    移出黑名单
                  </el-dropdown-item>
                  <el-dropdown-item command="addNote">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                    添加备注
                  </el-dropdown-item>
                  <el-dropdown-item command="viewHistory">
                    <el-icon>
                      <Clock />
                    </el-icon>
                    查看历史
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除记录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="拒绝详情" width="70%" top="5vh">
      <div v-if="currentCandidate" class="rejection-detail">
        <!-- 候选人基本信息 -->
        <div class="detail-header">
          <el-avatar :size="60" :src="currentCandidate.avatar">
            <el-icon>
              <User />
            </el-icon>
          </el-avatar>
          <div class="header-info">
            <h2>{{ currentCandidate.candidateName }}</h2>
            <p class="contact-info">
              <span>{{ currentCandidate.phone }}</span>
              <span>{{ currentCandidate.email }}</span>
            </p>
            <div class="status-tags">
              <el-tag :type="getStageTagType(currentCandidate.rejectionStage)">
                {{ getStageText(currentCandidate.rejectionStage) }}
              </el-tag>
              <el-tag :type="getStatusTagType(currentCandidate.status)">
                {{ getStatusText(currentCandidate.status) }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 详细信息 -->
        <el-tabs v-model="activeDetailTab" class="detail-tabs">
          <el-tab-pane label="拒绝信息" name="rejection">
            <div class="detail-section">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="投递职位">{{ currentCandidate.jobTitle }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">{{ currentCandidate.department }}</el-descriptions-item>
                <el-descriptions-item label="拒绝阶段">{{ getStageText(currentCandidate.rejectionStage)
                  }}</el-descriptions-item>
                <el-descriptions-item label="拒绝原因">{{ getReasonText(currentCandidate.rejectionReason)
                  }}</el-descriptions-item>
                <el-descriptions-item label="拒绝人">{{ currentCandidate.rejectedBy }}</el-descriptions-item>
                <el-descriptions-item label="拒绝时间">{{ formatDate(currentCandidate.rejectedAt) }}</el-descriptions-item>
              </el-descriptions>

              <h3 style="margin-top: 20px">详细说明</h3>
              <p class="rejection-detail-text">{{ currentCandidate.rejectionDetail || '无详细说明' }}</p>
            </div>
          </el-tab-pane>

          <el-tab-pane label="候选人信息" name="candidate">
            <div class="detail-section">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="姓名">{{ currentCandidate.candidateName }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ currentCandidate.gender || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ currentCandidate.age || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="学历">{{ currentCandidate.education || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="工作经验">{{ currentCandidate.experience || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="期望薪资">{{ currentCandidate.expectedSalary || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="现居地">{{ currentCandidate.location || '未填写' }}</el-descriptions-item>
                <el-descriptions-item label="投递时间">{{ formatDate(currentCandidate.applyTime) }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>

          <el-tab-pane label="操作记录" name="history">
            <div class="detail-section">
              <el-timeline>
                <el-timeline-item v-for="record in currentCandidate.operationHistory" :key="record.id"
                  :timestamp="formatDate(record.createdAt)" :type="getTimelineType(record.action)">
                  <div class="timeline-content">
                    <h4>{{ getActionText(record.action) }}</h4>
                    <p>{{ record.description }}</p>
                    <span class="operator">操作人：{{ record.operator }}</span>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>

          <el-tab-pane label="备注信息" name="notes">
            <div class="detail-section">
              <div class="notes-list">
                <div v-for="note in currentCandidate.notes" :key="note.id" class="note-item">
                  <div class="note-header">
                    <span class="note-author">{{ note.author }}</span>
                    <span class="note-time">{{ formatDate(note.createdAt) }}</span>
                  </div>
                  <div class="note-content">{{ note.content }}</div>
                </div>
              </div>

              <div class="add-note">
                <el-input v-model="newNote" type="textarea" :rows="3" placeholder="添加备注..."
                  style="margin-bottom: 10px" />
                <el-button type="primary" @click="handleAddNote">
                  添加备注
                </el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 重新考虑对话框 -->
    <el-dialog v-model="reconsiderDialogVisible" title="重新考虑候选人" width="500px">
      <el-form :model="reconsiderForm" label-width="100px">
        <el-form-item label="候选人">
          <span>{{ reconsiderForm.candidateName }}</span>
        </el-form-item>
        <el-form-item label="原职位">
          <span>{{ reconsiderForm.originalJob }}</span>
        </el-form-item>
        <el-form-item label="新职位" required>
          <el-select v-model="reconsiderForm.newJobId" placeholder="请选择新职位" style="width: 100%">
            <el-option v-for="job in jobList" :key="job.id" :label="job.title" :value="job.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="重新考虑原因" required>
          <el-input v-model="reconsiderForm.reason" type="textarea" :rows="3" placeholder="请输入重新考虑的原因" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reconsiderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmReconsider" :loading="reconsidering">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  RefreshRight,
  UserFilled,
  DocumentCopy,
  Close,
  Document,
  VideoCamera,
  Search,
  Refresh,
  User,
  View,
  ArrowDown,
  EditPen,
  Clock,
  Delete
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const reconsidering = ref(false)
const detailDialogVisible = ref(false)
const reconsiderDialogVisible = ref(false)
const currentCandidate = ref(null)
const activeDetailTab = ref('rejection')
const selectedCandidates = ref([])
const newNote = ref('')

// 统计数据
const stats = ref({
  total: 89,
  resumeRejected: 45,
  interviewRejected: 32,
  blacklisted: 12
})

// 搜索表单
const searchForm = reactive({
  candidateName: '',
  jobId: null,
  rejectionStage: '',
  rejectionReason: '',
  dateRange: null,
  status: ''
})

// 分页数据
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 重新考虑表单
const reconsiderForm = reactive({
  candidateId: null,
  candidateName: '',
  originalJob: '',
  newJobId: null,
  reason: ''
})

// 职位列表
const jobList = ref([
  { id: 1, title: 'Java开发工程师' },
  { id: 2, title: '前端开发工程师' },
  { id: 3, title: '产品经理' },
  { id: 4, title: 'UI设计师' }
])

// 拒绝人员数据
const tableData = ref([
  {
    id: 1,
    candidateName: '张小明',
    phone: '13800138001',
    email: 'zhangxiaoming@email.com',
    avatar: '',
    jobTitle: 'Java开发工程师',
    department: '技术部',
    rejectionStage: 'first_interview',
    rejectionReason: 'skill_mismatch',
    rejectionDetail: '技术能力与岗位要求不匹配，缺乏Spring Boot相关经验',
    rejectedBy: '李小红',
    rejectedAt: '2024-01-18T14:30:00',
    status: 'rejected',
    isBlacklisted: false,
    gender: '男',
    age: 28,
    education: '本科',
    experience: '2年',
    expectedSalary: '12-15K',
    location: '北京',
    applyTime: '2024-01-15T10:30:00',
    operationHistory: [
      {
        id: 1,
        action: 'apply',
        description: '候选人投递简历',
        operator: '系统',
        createdAt: '2024-01-15T10:30:00'
      },
      {
        id: 2,
        action: 'resume_pass',
        description: '简历筛选通过',
        operator: '王小明',
        createdAt: '2024-01-16T09:00:00'
      },
      {
        id: 3,
        action: 'interview_invite',
        description: '邀请参加初试',
        operator: '李小红',
        createdAt: '2024-01-17T11:00:00'
      },
      {
        id: 4,
        action: 'reject',
        description: '初试未通过，技能不匹配',
        operator: '李小红',
        createdAt: '2024-01-18T14:30:00'
      }
    ],
    notes: [
      {
        id: 1,
        author: '李小红',
        content: '候选人基础不错，但Spring Boot经验不足',
        createdAt: '2024-01-18T14:35:00'
      }
    ]
  },
  {
    id: 2,
    candidateName: '王小强',
    phone: '13800138002',
    email: 'wangxiaoqiang@email.com',
    avatar: '',
    jobTitle: '前端开发工程师',
    department: '技术部',
    rejectionStage: 'resume_screening',
    rejectionReason: 'insufficient_experience',
    rejectionDetail: '工作经验不足，不符合3年以上经验要求',
    rejectedBy: '张小华',
    rejectedAt: '2024-01-19T09:15:00',
    status: 'blacklisted',
    isBlacklisted: true,
    gender: '男',
    age: 24,
    education: '大专',
    experience: '1年',
    expectedSalary: '8-12K',
    location: '上海',
    applyTime: '2024-01-18T16:20:00',
    operationHistory: [
      {
        id: 1,
        action: 'apply',
        description: '候选人投递简历',
        operator: '系统',
        createdAt: '2024-01-18T16:20:00'
      },
      {
        id: 2,
        action: 'reject',
        description: '简历筛选未通过，经验不足',
        operator: '张小华',
        createdAt: '2024-01-19T09:15:00'
      },
      {
        id: 3,
        action: 'blacklist',
        description: '加入黑名单，多次投递不符合要求',
        operator: '张小华',
        createdAt: '2024-01-19T09:20:00'
      }
    ],
    notes: [
      {
        id: 1,
        author: '张小华',
        content: '多次投递经验不足的职位，建议加入黑名单',
        createdAt: '2024-01-19T09:20:00'
      }
    ]
  }
])

// 方法定义

/**
 * 获取阶段标签类型
 */
const getStageTagType = (stage: string) => {
  const typeMap: Record<string, string> = {
    'resume_screening': 'info',
    'first_interview': 'warning',
    'second_interview': 'primary',
    'final_interview': 'success',
    'background_check': 'primary',
    'offer_stage': 'success'
  }
  return typeMap[stage] || 'info'
}

/**
 * 获取阶段文本
 */
const getStageText = (stage: string) => {
  const textMap: Record<string, string> = {
    'resume_screening': '简历筛选',
    'first_interview': '初试',
    'second_interview': '复试',
    'final_interview': '终面',
    'background_check': '背景调查',
    'offer_stage': 'Offer阶段'
  }
  return textMap[stage] || stage
}

/**
 * 获取拒绝原因文本
 */
const getReasonText = (reason: string) => {
  const textMap: Record<string, string> = {
    'skill_mismatch': '技能不匹配',
    'insufficient_experience': '经验不足',
    'salary_expectation': '薪资期望过高',
    'poor_communication': '沟通能力差',
    'culture_mismatch': '文化不匹配',
    'other': '其他'
  }
  return textMap[reason] || reason
}

/**
 * 获取状态标签类型
 */
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    'rejected': 'danger',
    'blacklisted': 'danger',
    'reconsidered': 'warning'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'rejected': '已拒绝',
    'blacklisted': '黑名单',
    'reconsidered': '重新考虑'
  }
  return textMap[status] || status
}

/**
 * 获取时间线类型
 */
const getTimelineType = (action: string) => {
  const typeMap: Record<string, string> = {
    'apply': 'primary',
    'resume_pass': 'success',
    'interview_invite': 'warning',
    'reject': 'danger',
    'blacklist': 'danger',
    'reconsider': 'warning'
  }
  return typeMap[action] || 'primary'
}

/**
 * 获取操作文本
 */
const getActionText = (action: string) => {
  const textMap: Record<string, string> = {
    'apply': '投递简历',
    'resume_pass': '简历通过',
    'interview_invite': '面试邀请',
    'reject': '拒绝候选人',
    'blacklist': '加入黑名单',
    'reconsider': '重新考虑'
  }
  return textMap[action] || action
}

/**
 * 格式化日期
 */
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

/**
 * 搜索
 */
const handleSearch = () => {
  pagination.current = 1
  loadData()
}

/**
 * 重置搜索
 */
const handleReset = () => {
  Object.assign(searchForm, {
    candidateName: '',
    jobId: null,
    rejectionStage: '',
    rejectionReason: '',
    dateRange: null,
    status: ''
  })
  handleSearch()
}

/**
 * 查看详情
 */
const handleViewDetail = (candidate: any) => {
  currentCandidate.value = candidate
  detailDialogVisible.value = true
  activeDetailTab.value = 'rejection'
}

/**
 * 重新考虑
 */
const handleReconsider = (candidate: any) => {
  Object.assign(reconsiderForm, {
    candidateId: candidate.id,
    candidateName: candidate.candidateName,
    originalJob: candidate.jobTitle,
    newJobId: null,
    reason: ''
  })
  reconsiderDialogVisible.value = true
}

/**
 * 确认重新考虑
 */
const handleConfirmReconsider = () => {
  if (!reconsiderForm.newJobId || !reconsiderForm.reason) {
    ElMessage.warning('请填写完整信息')
    return
  }

  reconsidering.value = true

  // TODO: 调用API重新考虑候选人
  setTimeout(() => {
    reconsidering.value = false
    reconsiderDialogVisible.value = false
    ElMessage.success('已重新考虑该候选人')

    // 更新候选人状态
    const candidate = tableData.value.find(c => c.id === reconsiderForm.candidateId)
    if (candidate) {
      candidate.status = 'reconsidered'
    }

    loadData()
  }, 1000)
}

/**
 * 批量重新考虑
 */
const handleBatchReconsider = () => {
  ElMessage.info(`批量重新考虑 ${selectedCandidates.value.length} 名候选人`)
  // TODO: 实现批量重新考虑功能
}

/**
 * 批量加入黑名单
 */
const handleBatchBlacklist = () => {
  ElMessageBox.confirm(
    `确定要将选中的 ${selectedCandidates.value.length} 名候选人加入黑名单吗？`,
    '批量加入黑名单',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    selectedCandidates.value.forEach((candidate: any) => {
      candidate.status = 'blacklisted'
      candidate.isBlacklisted = true
    })
    ElMessage.success('批量加入黑名单成功')
    // TODO: 调用API批量加入黑名单
  })
}

/**
 * 处理操作
 */
const handleAction = (command: string, candidate: any) => {
  switch (command) {
    case 'blacklist':
      handleBlacklist(candidate)
      break
    case 'removeBlacklist':
      handleRemoveBlacklist(candidate)
      break
    case 'addNote':
      handleAddNoteDialog(candidate)
      break
    case 'viewHistory':
      handleViewHistory(candidate)
      break
    case 'delete':
      handleDelete(candidate)
      break
  }
}

/**
 * 加入黑名单
 */
const handleBlacklist = (candidate: any) => {
  ElMessageBox.confirm(
    `确定要将候选人「${candidate.candidateName}」加入黑名单吗？`,
    '加入黑名单',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    candidate.status = 'blacklisted'
    candidate.isBlacklisted = true
    ElMessage.success('已加入黑名单')
    // TODO: 调用API加入黑名单
  })
}

/**
 * 移出黑名单
 */
const handleRemoveBlacklist = (candidate: any) => {
  ElMessageBox.confirm(
    `确定要将候选人「${candidate.candidateName}」移出黑名单吗？`,
    '移出黑名单',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    candidate.status = 'rejected'
    candidate.isBlacklisted = false
    ElMessage.success('已移出黑名单')
    // TODO: 调用API移出黑名单
  })
}

/**
 * 添加备注对话框
 */
const handleAddNoteDialog = (candidate: any) => {
  currentCandidate.value = candidate
  detailDialogVisible.value = true
  activeDetailTab.value = 'notes'
}

/**
 * 添加备注
 */
const handleAddNote = () => {
  if (!newNote.value.trim()) {
    ElMessage.warning('请输入备注内容')
    return
  }

  const note = {
    id: Date.now(),
    author: '当前用户', // TODO: 获取当前用户名
    content: newNote.value,
    createdAt: new Date().toISOString()
  }

  currentCandidate.value.notes.unshift(note)
  newNote.value = ''
  ElMessage.success('备注添加成功')
  // TODO: 调用API添加备注
}

/**
 * 查看历史
 */
const handleViewHistory = (candidate: any) => {
  currentCandidate.value = candidate
  detailDialogVisible.value = true
  activeDetailTab.value = 'history'
}

/**
 * 删除记录
 */
const handleDelete = (candidate: any) => {
  ElMessageBox.confirm(
    `确定要删除候选人「${candidate.candidateName}」的拒绝记录吗？此操作不可恢复！`,
    '删除记录',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(() => {
    const index = tableData.value.findIndex(item => item.id === candidate.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
    }
    ElMessage.success('记录删除成功')
    // TODO: 调用API删除记录
  })
}

/**
 * 导出数据
 */
const handleExport = () => {
  ElMessage.info('导出功能开发中')
  // TODO: 实现导出功能
}

/**
 * 选择改变
 */
const handleSelectionChange = (selection: any[]) => {
  selectedCandidates.value = selection
}

/**
 * 分页大小改变
 */
const handleSizeChange = (size: number) => {
  pagination.size = size
  loadData()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (current: number) => {
  pagination.current = current
  loadData()
}

/**
 * 加载数据
 */
const loadData = () => {
  loading.value = true
  // TODO: 调用API获取数据
  setTimeout(() => {
    pagination.total = 89
    loading.value = false
  }, 500)
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.rejected-management {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.page-desc {
  color: #909399;
  margin: 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  border-left: 4px solid;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.total {
  border-left-color: #f56c6c;
}

.stat-card.resume {
  border-left-color: #e6a23c;
}

.stat-card.interview {
  border-left-color: #409eff;
}

.stat-card.blacklist {
  border-left-color: #909399;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.total .stat-icon {
  background: #f56c6c;
}

.resume .stat-icon {
  background: #e6a23c;
}

.interview .stat-icon {
  background: #409eff;
}

.blacklist .stat-icon {
  background: #909399;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
}

.candidate-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-content {
  flex: 1;
}

.candidate-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blacklist-tag {
  margin: 0;
}

.candidate-contact {
  font-size: 12px;
  color: #909399;
}

.candidate-contact .email {
  margin-left: 8px;
}

.job-info {
  line-height: 1.5;
}

.job-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.job-department {
  font-size: 12px;
  color: #909399;
}

.rejection-reason {
  line-height: 1.5;
}

.reason-main {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.reason-detail {
  font-size: 12px;
  color: #666;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.rejection-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.header-info {
  flex: 1;
}

.header-info h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #303133;
}

.contact-info {
  margin: 0 0 12px 0;
  color: #666;
}

.contact-info span {
  margin-right: 16px;
}

.status-tags {
  display: flex;
  gap: 8px;
}

.detail-tabs {
  margin-top: 20px;
}

.detail-section {
  padding: 20px 0;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.rejection-detail-text {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.timeline-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #303133;
}

.timeline-content p {
  margin: 0 0 4px 0;
  color: #666;
  font-size: 13px;
}

.operator {
  font-size: 12px;
  color: #999;
}

.notes-list {
  margin-bottom: 20px;
}

.note-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.note-author {
  font-weight: 500;
  color: #303133;
}

.note-time {
  font-size: 12px;
  color: #999;
}

.note-content {
  color: #666;
  line-height: 1.5;
}

.add-note {
  border-top: 1px solid #e4e7ed;
  padding-top: 20px;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }

  .header-right {
    align-self: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .stats-row .el-col {
    margin-bottom: 12px;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }
}
</style>
